<template>
  <div>
    <el-row :gutter="20">
      <el-col :span="24">
        <el-card class="box-card" shadow="hover">
          <div slot="header">
            <span>待下载机车列表</span>
          </div>
          <el-table
            :data="pendingList"
            style="width: 100%"
            :header-cell-style="{ background: '#f5f7fa', color: '#909399', padding: '10px' }"
          >
            <el-table-column prop="type" label="车型" width="80" />
            <el-table-column prop="number" label="车号" width="80" />
            <el-table-column prop="track" label="股道" width="80" />
            <el-table-column prop="inTime" label="入库时间" width="180" />
            <el-table-column label="操作" width="100">
              <template slot-scope="scope">
                <el-button size="mini" type="primary" @click="handleDownload(scope.row)">下载</el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-card>
      </el-col>
    </el-row>

    <el-row :gutter="20">
      <el-col :span="24">
        <el-card class="box-card" shadow="hover">
          <div slot="header">
            <span>已下载机车列表</span>
          </div>
          <el-table
            :data="downloadedList"
            style="width: 100%"
            :header-cell-style="{ background: '#f5f7fa', color: '#909399', padding: '10px' }"
          >
            <el-table-column prop="type" label="车型" width="80" />
            <el-table-column prop="number" label="车号" width="80" />
            <el-table-column prop="track" label="股道" width="80" />
            <el-table-column prop="inTime" label="入库时间" width="180" />
          </el-table>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  data() {
    return {
      pendingList: [
        { type: '车型1', number: '车号1', track: '股道1', inTime: '2024-11-01 10:00' },
        { type: '车型2', number: '车号2', track: '股道2', inTime: '2024-11-02 11:00' },
        { type: '车型1', number: '车号1', track: '股道1', inTime: '2024-11-01 10:00' },
        { type: '车型2', number: '车号2', track: '股道2', inTime: '2024-11-02 11:00' },
        { type: '车型1', number: '车号1', track: '股道1', inTime: '2024-11-01 10:00' },
        { type: '车型2', number: '车号2', track: '股道2', inTime: '2024-11-02 11:00' }
      ],
      downloadedList: [
        { type: '车型3', number: '车号3', track: '股道3', inTime: '2024-11-03 12:00' },
        { type: '车型4', number: '车号4', track: '股道4', inTime: '2024-11-04 13:00' },
        { type: '车型1', number: '车号1', track: '股道1', inTime: '2024-11-01 10:00' },
        { type: '车型2', number: '车号2', track: '股道2', inTime: '2024-11-02 11:00' },
        { type: '车型1', number: '车号1', track: '股道1', inTime: '2024-11-01 10:00' },
        { type: '车型2', number: '车号2', track: '股道2', inTime: '2024-11-02 11:00' }
      ]
    }
  },
  methods: {
    handleDownload(row) {
      // 下载逻辑
      console.log('下载', row)
      // 将下载的机车从待下载列表移动到已下载列表
      const index = this.pendingList.indexOf(row)
      if (index !== -1) {
        this.downloadedList.push(this.pendingList.splice(index, 1)[0])
      }
    }
  }
}
</script>

<style scoped>
.el-row {
  margin-bottom: 20px;
}

.card-header {
  padding: 12px 20px;
  font-size: 16px;
  font-weight: bold;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}

.clearfix:after {
  clear: both;
}

.box-card {
  border-radius: 4px;
}

.el-table .el-button {
  padding: 5px;
}
</style>
